import React, { ReactElement, useState, useEffect } from 'react';
import {
  Modal,
  Button,
  Input,
  Form,
  Select,
  message,
  TreeSelect,
  Radio,
} from 'antd';
import { getAllDepartment } from '@/api/user/user-manager';
import { getRole } from '@/api/role';
import { addUser } from '@/api/user/user-manager';

const { Option } = Select;

interface Props {
  add: () => void;
}

type addItem = {
  username: string;
  password: string;
  ssex: string;
  roleId: string;
  userId: string;
  status: string;
  email: string;
  deptId: string;
};

export default function userAdd({ add }: Props): ReactElement {
  const [isModalVisible, setisModalVisible] = useState(false);
  const [Depdata, setDepdata] = useState([]);
  const [role, setRole] = useState([]);

  const showModal = () => {
    setisModalVisible(true);
  };

  const handleCancel = () => {
    // console.log(123);
    setisModalVisible(false);
  };

  const onFinish = (val: addItem) => {
    console.log(val);

    addUser(val).then((res) => {
      console.log(res);
      add();
    });
  };

  const requestData = async () => {
    let { data } = await getAllDepartment();
    // console.log(data.rows.children);
    setDepdata(data.rows.children);
  };
  const requestRole = async () => {
    let { data } = await getRole();
    // console.log(data.rows);
    setRole(data.rows);
  };

  useEffect(() => {
    requestData();
    requestRole();
  }, []);

  return (
    <>
      <Button
        type="primary"
        ghost
        onClick={showModal}
        style={{ marginRight: '10px' }}
      >
        添加用户
      </Button>
      <Modal
        destroyOnClose
        title="添加用户"
        visible={isModalVisible}
        onCancel={handleCancel}
        footer={null}
      >
        <Form
          name="normal_login"
          className="login-form"
          onFinish={onFinish}
          initialValues={{}}
        >
          <Form.Item
            label="用户名"
            name="username"
            rules={[
              {
                required: true,
                message: '请输入用户名!',
              },
            ]}
          >
            <Input placeholder="用户名" />
          </Form.Item>

          <Form.Item
            label="密码"
            name="password"
            rules={[
              {
                required: true,
                message: '请输入密码!',
              },
            ]}
          >
            <Input placeholder="密码" />
          </Form.Item>

          {/* <Form.Item label="邮箱" name="email">
            <Input placeholder="邮箱" />
          </Form.Item> */}
          <Form.Item
            label="角色"
            name="roleId"
            rules={[
              {
                required: true,
                message: '请选择角色!',
              },
            ]}
          >
            <Select placeholder="请选择角色" allowClear>
              {role.map((v: any) => {
                return (
                  <Option key={v.roleId} value={`${v.roleId}`}>
                    {v.roleName}
                  </Option>
                );
              })}
            </Select>
          </Form.Item>

          <Form.Item label="部门" name="deptId">
            <TreeSelect
              style={{ width: 300 }}
              dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
              treeData={Depdata}
              placeholder="请选择"
              treeDefaultExpandAll
            />
          </Form.Item>
          <Form.Item
            label="状态"
            name="status"
            rules={[
              {
                required: true,
                message: '请选择状态!',
              },
            ]}
          >
            <Radio.Group>
              <Radio value="0">锁定</Radio>
              <Radio value="1">有效</Radio>
            </Radio.Group>
          </Form.Item>
          <Form.Item
            label="性别"
            name="ssex"
            rules={[
              {
                required: true,
                message: '请选择性别!',
              },
            ]}
          >
            <Radio.Group>
              <Radio value="1">男</Radio>
              <Radio value="2">女</Radio>
              <Radio value="0">保密</Radio>
            </Radio.Group>
          </Form.Item>

          <Form.Item>
            <Button type="primary" htmlType="submit">
              添加
            </Button>
          </Form.Item>
        </Form>
      </Modal>
    </>
  );
}
